<template>
  <div class="r-c">
    <div class="r-t">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="课程名称" prop="name">
          <el-input
              v-model="queryParams.name"
              placeholder="输入课程名称"
              clearable
              size="small"
              @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="预约结果" prop="status">
          <el-select v-model="queryParams.status" placeholder="选择预约结果" size="small" style="width: 150px">
            <el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size='small' @click="handleQuery" :icon='Search'
          >搜索</el-button
          >
          <el-button @click="resetQuery" size='small' :icon='Refresh'>
            重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
        v-loading="loading"
        :data="pageData"
        :strip='true'
        :border='true'
    >
      <el-table-column
          key="courseName"
          label="课程名称"
          align="center"
          prop="courseName"
          width="200"
      >
        <template #default="scope">
          <a :href="'/course/detail?cid='+scope.row.courseId">{{scope.row.courseName}}</a>
        </template>
      </el-table-column>
      <el-table-column
          key="status"
          label="预约状态"
          align="center"
          prop="status"
      >
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0" type="primary">{{'待支付'}}</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="success">{{'预约成功'}}</el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="warning">{{'预约失败'}}</el-tag>
          <el-tag v-else type="danger">{{scope.row.status+'_11111'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
          width="180"
      />
      <el-table-column
          label="更新时间"
          align="center"
          prop="updateTime"
          width="180"
      />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
              type="primary"
              size="small"
              @click="router.push('/course/detail?cid='+scope.row.courseId)"
              :icon='View'
          >查看课程详情</el-button
          >
          <el-button v-if="scope.row.status === 0"
              type="info"
              size="small"
              @click="approve(scope.row.id)"
              :icon='Edit'
          >现在支付</el-button>
          <el-button v-if="scope.row.status === 1"
                     type="success"
                     size="small"
                     @click="approve(scope.row.id)"
                     :icon='Edit'
          >取消预约</el-button>
          <el-button v-if="scope.row.status === 2"
                     type="danger"
                     size="small"
                     @click="approve(scope.row.id)"
                     :icon='Edit'
          >重新预约</el-button>
          <el-button v-if="scope.row.status === 3"
                     type="danger"
                     size="small"
                     @click="approve(scope.row.id)"
                     :icon='Edit'
          >支付</el-button>
          <el-button v-if="scope.row.status === 4"
                     type="danger"
                     size="small"
                     @click="approve(scope.row.id)"
                     :icon='Edit'
          >重新支付</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-footer class='footer'>
      <el-pagination
          size="small"
          background
          v-model:current-page="pagination.pageNum"
          v-model:page-size="pagination.pageSize"
          :page-count='pagination.pageCount'
          layout='total, prev, pager, next'
          :total='pagination.total'
          class='mt-4'
          style='float: left'
          @change='getPage'
      />
    </el-footer>
  </div>
</template>
<script setup lang="ts">
import {ref, reactive, onMounted} from "vue";
  import {Search,Refresh,Edit,View} from '@element-plus/icons-vue'
  import storage from '@/utils/storage.ts'
import {courseReservePage} from "@/api/course.ts";
import router from "@/router";
  const formDate = ref()
  const queryFormRef = ref()
  const pageData = ref([])

  const options = [{
    label: '审核中',
    value: 0
  },{
    label: '预约成功',
    value: 1
  },{
    label: '预约失败',
    value: 2
  }]

  const total = ref(0); // 数据总数
  const pagination = ref({
    currentPage: 1,
    pageSize: 10,
    total: 1,
    pageNum: 1,
    pageCount: 1,
  });

  const loading = ref(false)

  const queryParams = reactive({
    pageNum: 1,
    pageSize: 10,
    memberId: undefined,
    status: undefined,
    name: undefined,
  });
  const dialog = reactive({
    visible: false,
    type: "user-form",
    width: 800,
    title: "",
  });
  // 校验规则
  const rules = reactive({
    name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
  });

  const formData = reactive({
    id: 1,
    name: '',
    remark: ''
  });

  const user = ref()

const payReserve = (id: number) => {

}

  //查询
  const handleQuery = async () => {
    user.value = JSON.parse(storage.getItem('userInfo'))
    queryParams.memberId = user.value.id
    courseReservePage(queryParams).then((resp)=>{
      pageData.value = resp.data.records;
      pagination.value.total = resp.data.total;
      pagination.value.pageCount = resp.data.pages;
    })
  }
  const getPage = (currentPage:number,pageSize :number) => {
    user.value = JSON.parse(storage.getItem('userInfo'))
    queryParams.memberId = user.value.id
    queryParams.pageNum = currentPage
    queryParams.pageSize = pageSize
    handleQuery()
  }
  //重置查询条件
  const resetQuery = () => {
    queryFormRef.value.resetFields();
    queryParams.pageNum = 1;
    handleQuery();
  }

  //打开弹窗
  const openDialog = () => {

  }

  //关闭弹窗
  const closeDialog = () => {
    dialog.visible = false;
    /*if (dialog.type === "user-form") {
      userFormRef.value.resetFields();
      userFormRef.value.clearValidate();

      formData.id = undefined;
      // formData.status = 1;
    }*/
  }

  const handleSubmit = () => {

  }

  const approve = async () => {

  }

  onMounted(()=>{
    handleQuery()
  })

</script>
<style scoped>
  .r-c{
    width: 95%;
    margin-top: 10px;
  }
</style>